<template>
  <div ref="containerTarget" class="h-full overflow-auto bg-white dark:bg-zinc-800 duration-500
   scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent">
    <mine-navigation/>
    <div class="max-w-screen-xl mx-auto relative m-1 xl:mt-4">
      <mine-list></mine-list>
    </div>
    <!--    移动端下的tabbar-->
    <mine-trigger-menu v-if="isMobileTerminal"
                       class="fixed bottom-6 m-auto left-0 right-0 w-[220px]">
      <mine-trigger-menu-item icon="home" iconClass="fill-zinc-900 dark:fill-zinc-200">首页</mine-trigger-menu-item>
      <mine-trigger-menu-item v-if="$store.getters.token" icon="vip"
                              iconClass="fill-zinc-400 dark:fill-zinc-500"
                              textClass="text-zinc-400 dark:text-zinc-500"
                              @click="onVipClick"> VIP
      </mine-trigger-menu-item>
      <mine-trigger-menu-item icon="profile"
                              iconClass="fill-zinc-400 dark:fill-zinc-500"
                              textClass="text-zinc-400 dark:text-zinc-500"
                              @click="onMineClick">
        {{ $store.getters.token ? '我的' : '去登录 ' }}
      </mine-trigger-menu-item>
    </mine-trigger-menu>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

<script setup>
import MineNavigation from './components/navigation/index.vue'
import MineList from './components/list/index.vue'
import {isMobileTerminal} from "@/utils/flexible";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {useScroll} from "@vueuse/core";
import {onActivated, ref} from "vue";

const store = useStore()
const router = useRouter()
const onVipClick = () => {
  store.commit('app/changeRouterType', 'push')
  router.push('member')
}
const onMineClick = () => {
  //移动端下跳转的类型
  store.commit('app/changeRouterType', 'push')
  if (store.getters.token) {
    router.push('/profile')
  } else {
    router.push('/login')
  }
}
/**
 * 记录滚动
 * @type {null}
 */
const containerTarget = ref(null)
const {y: containerTargetScrollY} = useScroll(containerTarget)
//被缓存的组件再次可见会回调onActivated方法
onActivated(() => {
  if(!containerTarget.value){
    return
  }
  containerTarget.value.scrollTop = containerTargetScrollY.value
})

</script>

<style scoped>

</style>
